<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no,email=no">
<link rel="shortcut icon" href="//9.url.cn/edu/lego_modules/edu-ui/0.0.1/img/nohash/favicon.ico">
<link rel="dns-prefetch" href="//7.url.cn">
<link rel="dns-prefetch" href="//8.url.cn">
<link rel="dns-prefetch" href="//9.url.cn">
<meta name="robots" content="noindex,nofollow">
<title>习题管理</title>
<script>window.TRecord=window.TRecord||function(){var e={core:{indexNew:"7832-96-24",index:"7832-96-1",courseList:"7832-96-2",courseDetail:"7832-96-3",coursePackage:"7832-96-4",agencyIndex:"7832-96-7",agencyIndexNew:"7832-96-8",agencyTeacher:"7832-96-9",agencyServiceHelp:"7832-96-10",agencyRenzheng:"7832-96-11",404:"7832-96-12",personIndex:"7832-96-13",cateCommonTpl:"7832-96-23",topo:"7832-96-14",topoCourseList:"7832-96-15",searchAgency:"7832-96-16",applySuccess:"7832-96-17",acceptCoupon:"7832-96-18",faq:"7832-96-19",downloadTeacher:"7832-96-20",downloadApp:"7832-96-21"},agency:{applyAgency:"7832-98-1",applyPersonal:"7832-98-2",applyPersonalIntro:"7832-98-3",agencyAdmin:"7832-98-4",billing:"7832-98-5",cdkey:"7832-98-6",graph:"7832-98-7",installDetail:"7832-98-8",installment:"7832-98-9",level:"7832-98-10",mailbox:"7832-98-11",notice:"7832-98-12",orderdetails:"7832-98-13",profile:"7832-98-14",publish:"7832-98-15",publishpacks:"7832-98-16",research:"7832-98-17",schedule:"7832-98-18",serve:"7832-98-19",settlement:"7832-98-20",sign:"7832-98-21",serveReceive:"7832-98-22",scheduleTask:"7832-98-23"},user:{user:"7832-99-1",task:"7832-99-2",comment:"7832-99-3",schedule:"7832-99-4"}},n={url:""},a={};return{cfg:n,maps:e,push:function(e,n){a[e]=n||new Date-0},getCachedData:function(){return{cfg:n,speedPoints:a}}}}(),window.T=window.T||[+new Date],window.TAuto=!0;;</script>
<script>TRecord.push('page_css_ready');</script>
<!--[if lt IE 9]><script>var a ='header footer section aside nav article hgroup main time'.split(' ');while(a.length){document.createElement(a.pop());}</script><![endif]--><script>window.__DEBUG_STR__ = function(){return ''};window.__DIST_MODE__ = 'dist';</script>
    <link rel="stylesheet" type="text/css" href="//7.url.cn/edu/exercise/pages/agency/main.html_aio_8b186d4.css">
<style type="text/css"></style><script type="text/javascript" src="//7.url.cn/edu/lego_modules/ckeditor/4.5.10/ckeditor.js" crossorigin="anonymous"></script><script type="text/javascript" src="//7.url.cn/edu/lego_modules/ckeditorAdapter/0.0.1/ckeditorAdapter_750ac25.js" crossorigin="anonymous"></script><style>.cke{visibility:hidden;}</style></head>
<body class="frame" style=""> 
    <!--包含头部进来-->
    <div class="mod-header__wrap" id="js_main_nav">
        <div class="mod-header mod-header_inner mod-header_inner-1200 mod-header_show-tab clearfix">
            <!-- 登录相关组件 -->
<div id="js-mod-header-login" class="mod-header__wrap-login mod-header__wrap-logined" auto-test="mod_login">
    <!-- 用 mod-header__wrap-logined控制切换登录或未登录状态 -->

    <!-- 新版登录 个人 -->
    <div class="mod-header_wrap-user" id="js_logout_outer">
        <i class="icon-red-circle" style="display:none;"></i>
        <img alt="" class="mod-header__user-img js-avatar" width="40" height="40">
        <p class="mod-header__user-name"><a href="/user/index/index.html" class="mod-header__user-operation" rel="nofollow">个人中心<i class="icon-select-down"></i></a></p>
        <ul class="mod-header__user-operations">
            <li><a href="/user/index/index.html#sid=plan" class="mod-header__user-operation js-live-course" rel="nofollow" report-tdw="action=click&amp;obj1=tab&amp;obj2=8&amp;module=navigation">课程表</a></li>
            <li><a href="/user/index/index.html#sid=signup" class="mod-header__user-operation js-signup" rel="nofollow">全部订单</a></li>
            <li class="mod-header__mailbox hide"><a href="/agency/mailbox/index.html#sid=msg" class="mod-header__user-operation" rel="nofollow" report-tdw="action=click&amp;obj1=tab&amp;obj2=7&amp;module=navigation">消息管理</a></li>
            <li><a href="/user/index/index.html#sid=fav" class="mod-header__user-operation js-fav" rel="nofollow">收藏</a></li>
            <li><a href="/user/index/index.html#sid=coupon" class="mod-header__user-operation js-coupon" rel="nofollow">优惠券</a></li>
            <li class="js-et-course hide"><a href="/user/index/index.html#sid=et_course" class="mod-header__user-operation" rel="nofollow">企业培训课</a></li>
            <li><a href="javascript:void(0)" data-hook="logout" class="js_logout mod-header__link-logout js-login-op" report-tdw="action=click&amp;obj1=tab&amp;obj2=9&amp;module=navigation">退出</a></li>
        </ul>
    </div>
    <div class="mod-header_live-tip triangle">
        <p></p>
        <span class="btn-s btn-outline">我知道了</span>
    </div>
    <!-- 新版登录 机构 -->
    <div class="mod-header_wrap-user mod-header_wrap-user-org" id="js_logout_outer_agency" style="display: block;">
        <i class="icon-red-circle" style="display:none;"></i>
        <img alt="" class="mod-header__user-img js-avatar" width="40" height="40" src="//q2.qlogo.cn/g?b=qq&amp;k=Q57w9c9HpVibico8oGxrEF5g&amp;s=140&amp;t=1483286615">
        <p class="mod-header__user-name"><a href="//ke.qq.com/agency/index/index.html" report-tdw="action=organization_manage" class="mod-header__user-operation" rel="nofollow"><b>机构管理</b><i class="icon-select-down"></i></a></p>
        <ul class="mod-header__user-operations">
            <li class="mod-header__mailbox hide"><a href="/agency/mailbox/index.html#sid=msg" class="mod-header__user-operation" rel="nofollow" report-tdw="action=click&amp;obj1=tab&amp;obj2=7&amp;module=navigation">消息管理</a></li>
            <li><a href="//ke.qq.com/user/index/index.html#sid=plan" class="mod-header__user-operation js-course-plan" rel="nofollow" report-tdw="action=click&amp;obj1=tab&amp;obj2=8&amp;module=navigation">课程表</a></li>
            <li><a href="javascript:void(0)" data-hook="logout" class="js_logout mod-header__link-logout js-login-op" report-tdw="action=click&amp;obj1=tab&amp;obj2=9&amp;module=navigation">退出</a></li>
        </ul>
    </div>

    <a href="javascript:void(0)" class="mod-header__link-login js-login-op" id="js_login" data-hook="login" rel="nofollow">登录</a>

    <a id="js-help" href="//ke.qq.com/faq.html" class="mod-header__link-help" report-tdw="action=click&amp;obj1=tab&amp;obj2=10&amp;module=navigation">帮助</a>

    <!-- <div class="mod-header__wrap-common-operation">
        <a id="js_logout" href="javascript:void(0)" data-hook="logout" class="mod-header__link-logout js-login-op" style="display:none">退出</a>

         共有部分
         <i class="icon-sep"></i>

    </div> -->
    <!-- 机构用户end  -->
</div>
<!-- 登录相关组件end -->

<div class="mod-header-logo" auto-test="mod_logo">
    <a href="//ke.qq.com/" class="mod-header__link-logo" report-tdw="action=click&amp;obj1=tab&amp;obj2=1&amp;module=navigation" title="腾讯课堂_专业的在线教育平台">腾讯课堂</a>
</div>

<ul class="mod-header__nav" id="js-mod-header-nav" auto-test="mod_header_nav">
    <li class="mod-header__nav-item"><a href="//ke.qq.com/" class="mod-header__link-nav" report-tdw="action=click&amp;obj1=tab&amp;obj2=2&amp;module=navigation">首页</a></li><li class="mod-header__nav-item"><a href="//ke.qq.com/course/list" class="mod-header__link-nav" report-tdw="action=click&amp;obj1=tab&amp;obj2=3&amp;module=navigation">课程</a></li><li class="mod-header__nav-item"><a href="//ke.qq.com/activity/list/index.html" class="mod-header__link-nav" report-tdw="action=click&amp;obj1=tab&amp;obj2=4&amp;module=navigation">精选合辑</a></li><li class="mod-header__nav-item"><a href="//ke.qq.com/bbs/index.html" class="mod-header__link-nav" report-tdw="action=click&amp;obj1=tab&amp;obj2=5&amp;module=navigation">学团</a></li>

    <!--     <li class="mod-header__nav-item mod-header__nav-item-more" style="display: none;">
            <a href="javascript:void(0);" class="mod-header__link-nav">更多<span class="mod-header__nav-item-arrow"><span class="mod-header__nav-item-arrow-outer"></span><span class="mod-header__nav-item-arrow-inner"></span></span>
            </a>
            <ul class="mod-header__activity-list"></ul>
        </li> -->
</ul>
<!-- 搜索框组件 -->
<div class="mod-header__wrap-search" id="js-searchbox" auto-test="mod_search">
    <div class="mod-search">
        <a class="mod-search-dropdown">
            <span class="mod-search-dropdown-item mod-search-dropdown-item-selected" data-type="course">课程<i></i></span>
            <span class="mod-search-dropdown-item" style="display: none;" data-type="agency">机构<i></i></span>
        </a><input type="text" id="js_keyword" maxlength="38" class="mod-search__input" placeholder="搜索课程">
        <a id="js_header_clear" href="javascript:void(0)" class="mod-search__btn-clear" title="清空"></a>
        <a id="js_search" href="javascript:void(0)" class="mod-search__btn-search" report-tdw="action=click&amp;obj1=tab&amp;obj2=6&amp;module=navigation"><i class="icon-search"></i></a>
    </div>
</div>
<!-- 搜索框组件end -->

        </div>
    </div>
    <!--主要内容 S-->
    <div class="yy_ component-1" id="agency-container"> <div class="auto-box" id="mainBox"> <div class="jgm-hd-top jgm-exercise-title js-exercise-title"> <div class="sc-title"> <span class="jgm-hd-title">习题管理</span> </div> </div> <div class="yy_wrap"> <p class="backbtn__sub-title"><span class="js-backbtn-title">新增试卷</span></p> </div> <div class="ques-list-box js-list-box"> <div class="ques-list-wrap" id="js-list-wrap"> <p class="backbtn__sub-title"> <span class="js-select-title">选择需要加入试卷中的题目</span> <span class="backbtn__sub-title-back" q-on="click:backBtnClk(this, e)">&lt; 返回</span> </p> <div class="jgm-hd mod-tab-wrap js-exercise-tab" style=""> <ul class="mod-tab__ul"> <li class="mod-tab__li js-page-tab"><a href="#js-my-paper">全部试卷</a></li> <li class="mod-tab__li js-my-question-tab mod-tab__li_current"><a href="#js-my-question">机构题库</a></li> <li class="mod-tab__li"><a href="#js-global-question">平台题库</a></li> </ul> </div> <a href="javascript:void(0)" class="btn-default yy_create exercise-create-btn" q-on="click:createExam">新增试卷</a> <div class="js-exercise-wrap exercise-wrap"> <div class="js-my-paper js-exercise-ctn" style="display: none;"> <label class="exam-filter only-owner f-checkbox checked" q-class="checked:onlyOwner" data-name="only_onwer" q-attr="data-value|setCheckValue" q-on="click:toggleFilter(e)"> <i class="icon-checkbox"></i> <span class="f-label-text">我组的试卷</span></label> <div class="yx_main" id="examlist-wrap" q-ref="examlist"><div class="yx_list" q-show="e_error|checkIsShow" style="display: none;"><table class="jgm-table"><tbody><tr><th width="25%">试卷(题目数)</th><th width="25%">出题人</th><th width="15%">平均分</th><th width="15%">修改时间</th><th width="20%">操作</th></tr><!--q-repeat--></tbody></table><div class="yw_main" id="e_page_ctrl" q-with="e_pagectrl"><a href="javascript:void(0)" q-on="click:prePage" class="page-prev-btn page-btn-dis" q-class="page-btn-dis:dataChange|checkPreBtn">&lt;</a><!--q-repeat--><span class="apostrophe hide" q-class="hide:mid|checkMid">...</span><!--q-repeat--><span class="apostrophe hide" q-class="hide:last|checkLast">...</span><!--q-repeat--><a href="javascript:void(0)" q-on="click:nextPage" class="page-prev-btn" q-class="page-btn-dis:dataChange|checkNextBtn">&gt;</a><span class="count-ctr">每页<input q-value="count" onkeypress="return (event.charCode == 13) || (event.charCode >= 48 &amp;&amp; event.charCode <= 57)" q-on="blur:countChanged(this, e), keyup:countKeyup(this, e)" maxlength="2">条</span></div><div class="clearfix"></div></div><div class="yv_main" id="e_loading" q-with="e_error"><div class="section-msg" q-show="state|isShow" style="display: block;"><div class="msg-inner"><i class="icon-font icon-msg-large i-info" q-class="icon"></i><div class="msg-text" q-text="msg">暂无试卷，点击新建试卷创建一份试卷。</div></div></div></div></div> </div> <div class="js-my-question js-exercise-ctn" style="display: block;"> <div class="yy_btn-ctn exercise-btn-ctn"> <div class="yu_main js-mutisubmit-main" id="mutisubmit-wrap"> <a href="javascript:void(0)" class="btn-outline yu_mutisubmit btn-s" q-on="click:toShow(e, this)">批量录题</a> <a href="./import.html" class="btn-outline yu_mutisubmit btn-s" target="_blank">逐道录题</a> <div class="js-mutisubmit-modal modal yu_modal mutisubmit-modal not-show-guide" q-show="isMutiSubmitShow" q-class="not-show-guide:notShowGuide" style="display: none;"> <div class="modal-hd"> <h3 class="hd-tt js-modal-title">批量录题</h3> <a href="javascript:void(0);" class="js-modal-close btn-close" title="关闭" q-on="click:close">×</a> </div> <div class="modal-bd modal-bd--padding" style=""> <p class="msg-text"><span class="yu_strong-span">注：</span>支持单选题、多选题、填空题、材料题</p> <div class="form form--h"> <div class="yt_main f-item" id="mutisubmit__cate" q-with="categoryList"> <label class="f-label"> <span class="f-required">*</span> <span>类目: </span> </label> <div class="f-field"> <div class="yt_select f-select" q-attr="data-name:firstCat.data_name" data-name="first_category" tabindex="1"> <div class="f-value-wrap"> <div class="f-value" q-text="firstCat|getSelected">请选择类目</div> <span class="f-select-icon"><i class="icon-arrow-down"></i></span> </div> <div class="f-select-dropdown f-select--scroll"> <ul class="f-value-list"> <li q-text="name|decode" q-attr="data-value: key" data-value="1006">兴趣·生活</li><!--q-repeat--> </ul> </div> </div> <div q-show="secondCat.isShow" class="yt_select f-select" q-attr="data-name:secondCat.data_name" data-name="second_category" tabindex="2" style="display: none;"> <div class="f-value-wrap"> <div class="f-value" q-text="secondCat|getSelected">请选择类目</div> <span class="f-select-icon"><i class="icon-arrow-down"></i></span> </div> <div class="f-select-dropdown f-select--scroll"> <ul class="f-value-list"> <!--q-repeat--> </ul> </div> </div> <div q-show="thirdCat.isShow" class="yt_select f-select" q-attr="data-name:thirdCat.data_name" data-name="third_category" tabindex="3" style="display: none;"> <div class="f-value-wrap"> <div class="f-value" q-text="thirdCat|getSelected">请选择类目</div> <span class="f-select-icon"><i class="icon-arrow-down"></i></span> </div> <div class="f-select-dropdown f-select--scroll"> <ul class="f-value-list"> <!--q-repeat--> </ul> </div> </div> <div class="f-msg"> <i class="icon-msg"></i> <p class="f-msg-text"></p> </div> </div> </div> </div> <div class="file-upload yu_file-upload"> <a href="javascript:void(0)" class="js-file-upload"> <span type="text" class="yu_file-input js-exercise-file-input" placeholder="请选择需要上传的文件" q-text="filepath" q-attr="title:filepath" title=""></span> <span class="btn-weak yu_file-select" q-class="yu_hover:hover, yu_active:active">浏览</span> </a> <label q-attr="title:filepath" class="yu_label" for="js-exercise-file-upload" q-on="mouseover:mouseover(e, this), mouseleave:mouseleave(e, this), mouseup:mouseup(e, this), mousedown:mousedown(e, this)" title=""> </label> <input type="file" id="js-exercise-file-upload" class="yu_file-slt js-exercise-file-upload" name="filename"> <div class="file-upload-help yu_file-upload-help"><i class="icon-font" q-class="i-success:succ, i-alert:err"></i><p class="yu_tips-text" q-html="tipsStr"></p></div> </div> <p class="msg-text">下载模版文件： <a class="nor-link yu_link" href="/docs/DanXuan.zip" data-type="single" q-on="click:fileDownloadClick(e)">单选题</a> <a class="nor-link yu_link" href="/docs/DuoXuan.zip" data-type="multi" q-on="click:fileDownloadClick(e)">多选题</a> <a class="nor-link yu_link" href="/docs/TianKong.zip" data-type="blank" q-on="click:fileDownloadClick(e)">填空题</a> <a class="nor-link yu_link" href="/docs/CaiLiao.zip" data-type="blank" q-on="click:fileDownloadClick(e)">材料题</a> </p> </div> <div class="modal-ft"> <a class="yu_upload-guide nor-link" href="http://support.ke.qq.com/forum.php?mod=viewthread&amp;tid=671&amp;page=1&amp;extra=#pid2317" target="_blank" q-on="click:helpLinkClick">上传指引帮助</a> <a href="javascript:void(0);" title="确定" class="js-modal-yes btn-default dis-btn" q-on="click:toSubmit" q-class="dis-btn:dis">导入</a> </div>   </div> <div tabindex="-1" class="exam-overlay" style="display:none" q-show="isMutiSubmitShow"></div></div> <div class="ys_main js-feedback-main" id="feedback-wrap"> <span class="ys_btn" q-on="click:showFeedback"> 题目反馈(<span class="ys_amount" q-text="total">0</span>) </span> <div class="ys_dialog modal" style="display:none" q-show="isFeedBackShow"> <div class="modal-hd"> <h3 class="hd-tt">题目反馈</h3> <a href="javascript:void(0);" class="btn-close" title="关闭" q-on="click: hideFeedback">×</a> </div> <div class="ys_list"> <div class="ys_table-wrapper"> <table> <tbody><tr> <th width="15%">反馈题目</th> <th width="40%">反馈内容</th> <th width="15%">用户QQ/ID</th> <th width="20%">反馈时间</th> <th width="10%">操作</th> </tr> <!--q-repeat--> </tbody></table> </div> <div class="yw_main" id="fb_page_ctrl" q-with="fb_pagectrl"><a href="javascript:void(0)" q-on="click:prePage" class="page-prev-btn page-btn-dis" q-class="page-btn-dis:dataChange|checkPreBtn">&lt;</a><!--q-repeat--><span class="apostrophe hide" q-class="hide:mid|checkMid">...</span><!--q-repeat--><span class="apostrophe hide" q-class="hide:last|checkLast">...</span><!--q-repeat--><a href="javascript:void(0)" q-on="click:nextPage" class="page-prev-btn" q-class="page-btn-dis:dataChange|checkNextBtn">&gt;</a><span class="count-ctr">每页<input q-value="count" onkeypress="return (event.charCode == 13) || (event.charCode >= 48 &amp;&amp; event.charCode <= 57)" q-on="blur:countChanged(this, e), keyup:countKeyup(this, e)" maxlength="2">条</span></div> </div>  </div> <div tabindex="-1" class="exam-overlay" style="display:none" q-show="isFeedBackShow"></div></div> </div> <div class="yr_main" id="agency-selector-wrap" q-with="mySelector" q-ref="mySelector"><div class="yr_search"><input id="yr_search_input" class="mod-search__input" type="text" q-model="searchWordInInput" placeholder="请输入关键词" q-on="keyup:enterSearch"><a href="javascript:void(0)" class="mod-search__btn-search" q-on="click:goSearch"><i class="icon-font icon-search"></i></a></div><!--q-if--><div class="yr_breadcrumb" q-show="isBreadcrumbShow" style="display: block;"> <span q-on="click:breadcrumbSelected(this)"><a href="javascript:void(0)" q-text="text">全部题目</a><span class="mod-breadcrumbs__arrow">&nbsp;&gt;&nbsp;</span></span><!--q-repeat--><span q-on="click:removeLabel(this)"><a href="javascript:void(0)" class="yr_label"><span q-text="text|decode">我录的题</span><i class="close">×</i></a></span><!--q-repeat--></div><div class="yr_wrapper sort-menu-con"><div class="yr_category"><dl class="sort-menu sort-menu1"><dt class="title" q-text="category|getTitle">全部试卷</dt><dd class="content"><a q-text="n|decode" q-on="click:selectCategory(this, e)" href="javascript:void(0)" q-class="selected: selected" class="selected">全部</a><a q-text="n|decode" q-on="click:selectCategory(this, e)" href="javascript:void(0)" q-class="selected: selected">兴趣·生活</a><!--q-repeat--></dd></dl></div><div class="yr_filters"><div class="filter-row qtype" q-class="key"><dl class="sort-menu sort-menu2 clearfix" q-class="tag-filter-row:type|checkType tag"><dt class="title" q-text="title">题目类型</dt><dd class="content"><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="1"><span q-text="text">单选</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="2"><span q-text="text">多选</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="3"><span q-text="text">判断</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="4"><span q-text="text">填空</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="5"><span q-text="text">作图</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="6"><span q-text="text">材料</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="8"><span q-text="text">作文</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="8"><span q-text="text">雅思作文</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="9"><span q-text="text">口语题</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="10"><span q-text="text">雅思听力</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="11"><span q-text="text">雅思阅读</span><i class="close">×</i></a><!--q-repeat--></dd><!--q-if--><!--q-if--></dl><div class="filter-border"></div></div><div class="filter-row f_owner" q-class="key"><dl class="sort-menu sort-menu2 clearfix" q-class="tag-filter-row:type|checkType tag"><dt class="title" q-text="title">录题人</dt><dd class="content"><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" data-val="0"><span q-text="text">全部</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="selected"><span q-text="text">我录的题</span><i class="close">×</i></a><!--q-repeat--></dd><!--q-if--><!--q-if--></dl><div class="filter-border"></div></div><div class="filter-row tags" q-class="key"><dl class="sort-menu sort-menu2 clearfix tag-filter-row" q-class="tag-filter-row:type|checkType tag"><dt class="title" q-text="title">标签</dt><!--q-if--><dd class="content filter-tag"><!--q-repeat--></dd><div class="btn-ctn"><button class="more-btn" q-on="click:toggleTagFilterHeight(e)" style="display: none;">更多<i class="icon-v icon-font i-v-bottom"></i><span class="vertical-bar">|</span></button><div class="yq_main" q-class="yq_import:isImport" q-on="click: ctnClick(e)" id="tag-management"> <a href="javascript:void(0)" class="btn btn-weak tag-manage-btn" q-show="tags|hasTags" q-on="click:toShow" style="display: none;">管理</a> <div class="yq_dialog modal" q-show="isShow" style="display: none;"> <div class="modal-hd"> <h3 class="hd-tt">标签管理</h3> <a href="javascript:void(0);" class="btn-close" title="关闭" q-on="click: toHide(e)">×</a> </div> <div class="modal-bd"> <!--q-if--> <div class="yq_list"> <!--q-repeat--> <a q-showaddbtn="addInputShow" class="yq_tags-add-btn" href="javascript:void(0)" q-on="click:showAddTag" style="display: inline-block;"> <i class="icon-font i-add"></i> </a> <div q-showaddinput="addInputShow" class="yq_add-tag-block" style="display: none;"> <input q-model="addText" class="f-text" type="text" q-on="keyup:enter(e)" data-name="input1"> <a q-on="click:addBtnClick(e)" href="javascript:void(0)">添加</a> <a q-on="click:addCancelClick(e)" href="javascript:void(0)">取消</a> </div> </div> </div> <div class="modal-ft"> <a href="javascript:void(0);" title="确定" class="js-modal-yes btn-default" q-on="click:toHide(e)">确定</a> </div> </div> <div tabindex="-1" class="exam-overlay" q-show="isShow" q-on="click:stopPropagation(e)" style="display: none;"></div></div></div></dl><!--q-if--></div><!--q-repeat--></div><div class="yr_filters more_filters"><!--q-repeat--></div><!--q-if--></div></div> <div class="grid-question-list js-grid-my-question"> <div class="ya_main" id="js-my-question" q-ref="myQuestion" q-with="myQuestionList"> <div class="chose-all-btn ya_chose-all"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosenall, disabled:chosenallDisabled" q-on="click:toChoseAll(e)"> <i class="icon-checkbox question-checkbox"></i> 全选 </label> </div> <ul> <!--q-repeat--> </ul></div> <div class="yv_main" id="agency-loading" q-with="myQuestionLoading"><div class="section-msg" q-show="state|isShow" style="display: block;"><div class="msg-inner"><i class="icon-font icon-msg-large i-info" q-class="icon"></i><div class="msg-text" q-text="msg">暂无已选筛选条件的题目，搜索其他题目试试吧</div></div></div></div> <div class="yw_main page_ctrl" id="agency-page-ctrl" q-with="myQuestionPage"><a href="javascript:void(0)" q-on="click:prePage" class="page-prev-btn page-btn-dis" q-class="page-btn-dis:dataChange|checkPreBtn">&lt;</a><a href="javascript:void(0)" q-text="n" class="page-btn active" q-on="click:pageSelected(this)" q-class="active:isActive">1</a><!--q-repeat--><span class="apostrophe hide" q-class="hide:mid|checkMid">...</span><!--q-repeat--><span class="apostrophe hide" q-class="hide:last|checkLast">...</span><!--q-repeat--><a href="javascript:void(0)" q-on="click:nextPage" class="page-prev-btn page-btn-dis" q-class="page-btn-dis:dataChange|checkNextBtn">&gt;</a><span class="count-ctr">每页<input q-value="count" onkeypress="return (event.charCode == 13) || (event.charCode >= 48 &amp;&amp; event.charCode <= 57)" q-on="blur:countChanged(this, e), keyup:countKeyup(this, e)" maxlength="2">条</span></div> <div class="clearfix"></div> </div> </div> <div class="js-global-question js-exercise-ctn" style="display: none;"> <div class="yy_btn-ctn exercise-btn-ctn"> <div class="yb_main js-cooperation-main" style="" id="cooperation-wrap"> <a href="javascript:void(0)" class="btn-outline yb_mutisubmit btn-s" q-on="click:toShow">申请题库合作</a> <div class="yb_intro-wrap"> <span class="icon-font i-question"></span> <div class="yb_intro"> <div class="intro-bd"> <h3 class="bd-tt">什么是平台题库？</h3> <p>平台题库中的题目由腾讯课程的合作机构或者腾讯课程官方上传，并授权腾讯课程使用；</p> <p>平台题库中的题目将供腾讯课程所有的机构使用，以及腾讯课程在某些功能中使用；</p> <p>我们会根据合作机构所提供的题目数量及质量，给予不同程度的汇报；</p> <p>关于平台题库的更多详情，请<a href="http://support.ke.qq.com/forum.php?mod=viewthread&amp;tid=674" target="_blank">访问论坛查看</a></p> </div> </div> </div> <div class="yb_dialog modal" q-show="isCooperationShow" style="display: none;"> <div class="modal-hd"> <h3 class="hd-tt">申请题库合作</h3> <a href="javascript:void(0);" class="btn-close" title="关闭" q-on="click: toHide">×</a> </div> <div class="yb_list form form--h"> <h3 class="bd-tt">申请题库合作</h3> <p>如果你想为平台题库贡献一份力量，可以填写以下表格进行申请。如提供题目符合要求，我们会在申请后7个工作日内联系您。 <br>成功进入题库的题目，将在做题时显示上传机构的链接。</p> <div class="yt_main f-item" id="category-selector"> <label class="f-label"> <span class="f-required">*</span> <span>类目: </span> </label> <div class="f-field"> <div class="yt_select f-select" q-attr="data-name:firstCat.data_name" data-name="first_category" tabindex="1"> <div class="f-value-wrap"> <div class="f-value" q-text="firstCat|getSelected">请选择类目</div> <span class="f-select-icon"><i class="icon-arrow-down"></i></span> </div> <div class="f-select-dropdown f-select--scroll"> <ul class="f-value-list"> <li q-text="name|decode" q-attr="data-value: key" data-value="1006">兴趣·生活</li><!--q-repeat--> </ul> </div> </div> <div q-show="secondCat.isShow" class="yt_select f-select" q-attr="data-name:secondCat.data_name" data-name="second_category" tabindex="2" style="display: none;"> <div class="f-value-wrap"> <div class="f-value" q-text="secondCat|getSelected">请选择类目</div> <span class="f-select-icon"><i class="icon-arrow-down"></i></span> </div> <div class="f-select-dropdown f-select--scroll"> <ul class="f-value-list"> <!--q-repeat--> </ul> </div> </div> <div q-show="thirdCat.isShow" class="yt_select f-select" q-attr="data-name:thirdCat.data_name" data-name="third_category" tabindex="3" style="display: none;"> <div class="f-value-wrap"> <div class="f-value" q-text="thirdCat|getSelected">请选择类目</div> <span class="f-select-icon"><i class="icon-arrow-down"></i></span> </div> <div class="f-select-dropdown f-select--scroll"> <ul class="f-value-list"> <!--q-repeat--> </ul> </div> </div> <div class="f-msg"> <i class="icon-msg"></i> <p class="f-msg-text"></p> </div> </div> </div> <div id="js-question-info-field" class="f-item f-item--info" q-setclass="infoMsgState"> <label class="f-label"> <span class="f-required">*</span> 题目数量: </label> <div class="f-field"> <div class="f-checkbox-list list--block"> <div class="f-checkbox-wrapper"> <label class="f-checkbox" q-class="checked: checked, inputcheckbox: alterable" q-on="mouseup: toggleType(this, e)"> <i class="icon-checkbox"></i> <span class="f-label-text" q-class="hide: alterable" q-text="type | toTypeName">单选题</span> <input class="f-text hide" type="text" placeholder="其他" maxlength="10" q-class="hide: alterable | negate" q-on="mouseup: stopBubble(e), keyup: setOtherText(this, e)"> </label> <div class="f-checkbox-attach"> <span>数量:</span> <input class="f-text f-error" type="text" maxlength="4" q-class="f-error: count | isNum" q-value="count" q-on="keydown: setType(this, e)"> </div> </div><div class="f-checkbox-wrapper"> <label class="f-checkbox" q-class="checked: checked, inputcheckbox: alterable" q-on="mouseup: toggleType(this, e)"> <i class="icon-checkbox"></i> <span class="f-label-text" q-class="hide: alterable" q-text="type | toTypeName">多选题</span> <input class="f-text hide" type="text" placeholder="其他" maxlength="10" q-class="hide: alterable | negate" q-on="mouseup: stopBubble(e), keyup: setOtherText(this, e)"> </label> <div class="f-checkbox-attach"> <span>数量:</span> <input class="f-text f-error" type="text" maxlength="4" q-class="f-error: count | isNum" q-value="count" q-on="keydown: setType(this, e)"> </div> </div><div class="f-checkbox-wrapper"> <label class="f-checkbox" q-class="checked: checked, inputcheckbox: alterable" q-on="mouseup: toggleType(this, e)"> <i class="icon-checkbox"></i> <span class="f-label-text" q-class="hide: alterable" q-text="type | toTypeName">判断题</span> <input class="f-text hide" type="text" placeholder="其他" maxlength="10" q-class="hide: alterable | negate" q-on="mouseup: stopBubble(e), keyup: setOtherText(this, e)"> </label> <div class="f-checkbox-attach"> <span>数量:</span> <input class="f-text f-error" type="text" maxlength="4" q-class="f-error: count | isNum" q-value="count" q-on="keydown: setType(this, e)"> </div> </div><div class="f-checkbox-wrapper"> <label class="f-checkbox" q-class="checked: checked, inputcheckbox: alterable" q-on="mouseup: toggleType(this, e)"> <i class="icon-checkbox"></i> <span class="f-label-text" q-class="hide: alterable" q-text="type | toTypeName">填空题</span> <input class="f-text hide" type="text" placeholder="其他" maxlength="10" q-class="hide: alterable | negate" q-on="mouseup: stopBubble(e), keyup: setOtherText(this, e)"> </label> <div class="f-checkbox-attach"> <span>数量:</span> <input class="f-text f-error" type="text" maxlength="4" q-class="f-error: count | isNum" q-value="count" q-on="keydown: setType(this, e)"> </div> </div><div class="f-checkbox-wrapper"> <label class="f-checkbox inputcheckbox" q-class="checked: checked, inputcheckbox: alterable" q-on="mouseup: toggleType(this, e)"> <i class="icon-checkbox"></i> <span class="f-label-text hide" q-class="hide: alterable" q-text="type | toTypeName"></span> <input class="f-text" type="text" placeholder="其他" maxlength="10" q-class="hide: alterable | negate" q-on="mouseup: stopBubble(e), keyup: setOtherText(this, e)"> </label> <div class="f-checkbox-attach"> <span>数量:</span> <input class="f-text f-error" type="text" maxlength="4" q-class="f-error: count | isNum" q-value="count" q-on="keydown: setType(this, e)"> </div> </div><!--q-repeat--> </div> <div class="f-msg"> <i class="icon-msg"></i> <p class="f-msg-text" q-text="infoMsgState | toInfoMsg">请填写题目数量</p> </div> </div> </div> <div class="f-item f-item--info" q-setclass="descMsgState"> <label class="f-label">描述:</label> <div class="f-field"> <textarea class="f-textarea" q-attr="value: description" q-on="keyup: setDesc(e)"></textarea> <div class="f-msg"> <i class="icon-msg"></i> <p class="f-msg-text" q-text="descMsgState | toDescMsg">0-120字</p> </div> </div> </div> <div class="f-item"> <div class="f-field"> <span class="btn-default btn-m disabled" q-class="disabled: canSubmit | negate" q-on="click: submit">提交</span> </div> </div> </div> </div> <div tabindex="-1" class="exam-overlay" q-show="isCooperationShow" style="display: none;"></div></div> </div> <div class="yr_main" id="global-selector-wrap" q-with="globalSelector"><div class="yr_search"><input id="yr_search_input" class="mod-search__input" type="text" q-model="searchWordInInput" placeholder="请输入关键词" q-on="keyup:enterSearch"><a href="javascript:void(0)" class="mod-search__btn-search" q-on="click:goSearch"><i class="icon-font icon-search"></i></a></div><!--q-if--><div class="yr_breadcrumb" q-show="isBreadcrumbShow" style="display: none;"> <span q-on="click:breadcrumbSelected(this)"><a href="javascript:void(0)" q-text="text">全部题目</a><span class="mod-breadcrumbs__arrow">&nbsp;&gt;&nbsp;</span></span><!--q-repeat--><!--q-repeat--></div><div class="yr_wrapper sort-menu-con"><div class="yr_category"><dl class="sort-menu sort-menu1"><dt class="title" q-text="category|getTitle">全部试卷</dt><dd class="content"><a q-text="n|decode" q-on="click:selectCategory(this, e)" href="javascript:void(0)" q-class="selected: selected" class="selected">全部</a><a q-text="n|decode" q-on="click:selectCategory(this, e)" href="javascript:void(0)" q-class="selected: selected">兴趣·生活</a><!--q-repeat--></dd></dl></div><div class="yr_filters"><div class="filter-row qtype" q-class="key"><dl class="sort-menu sort-menu2 clearfix" q-class="tag-filter-row:type|checkType tag"><dt class="title" q-text="title">题目类型</dt><dd class="content"><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="1"><span q-text="text">单选</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="2"><span q-text="text">多选</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="3"><span q-text="text">判断</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="4"><span q-text="text">填空</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="5"><span q-text="text">作图</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="6"><span q-text="text">材料</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-general" data-val="8"><span q-text="text">作文</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="8"><span q-text="text">雅思作文</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="9"><span q-text="text">口语题</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="10"><span q-text="text">雅思听力</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v" class="js-label-ielts" data-val="11"><span q-text="text">雅思阅读</span><i class="close">×</i></a><!--q-repeat--></dd><!--q-if--><!--q-if--></dl><div class="filter-border"></div></div><div class="filter-row stage" q-class="key"><dl class="sort-menu sort-menu2 clearfix" q-class="tag-filter-row:type|checkType tag"><dt class="title" q-text="title">学习阶段</dt><dd class="content"><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v"><span q-text="text">菜鸟</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v"><span q-text="text">入门</span><i class="close">×</i></a><a q-class="selected:selected" href="javascript:void(0)" q-on="click:selectLabel(this, e)" q-pagetype="pagetype" q-attr="data-val:v"><span q-text="text">高手</span><i class="close">×</i></a><!--q-repeat--></dd><!--q-if--><!--q-if--></dl><div class="filter-border"></div></div><!--q-repeat--></div><div class="yr_filters more_filters"><div class="filter-row"><dl class="sort-menu sort-menu2 clearfix"><dt class="title" q-text="title">题目年份</dt><!--q-if--><!--q-if--><dd class="content yr_select f-select" q-attr="data-name:data_name" data-name="s_year" tabindex="1"><div class="f-value-wrap"><div class="f-value">全部</div><span class="f-select-icon"><i class="icon-arrow-down"></i></span></div><div class="f-select-dropdown f-select--scroll"><ul class="f-value-list"><li q-text="text" q-attr="data-value: v" data-value="">全部</li><li q-text="text" q-attr="data-value: v" data-value="2017">2017</li><li q-text="text" q-attr="data-value: v" data-value="2016">2016</li><li q-text="text" q-attr="data-value: v" data-value="2015">2015</li><li q-text="text" q-attr="data-value: v" data-value="2014">2014</li><li q-text="text" q-attr="data-value: v" data-value="2013">2013</li><li q-text="text" q-attr="data-value: v" data-value="2012">2012</li><li q-text="text" q-attr="data-value: v" data-value="2011">2011</li><li q-text="text" q-attr="data-value: v" data-value="2010">2010</li><li q-text="text" q-attr="data-value: v" data-value="2009">2009</li><li q-text="text" q-attr="data-value: v" data-value="2008">2008</li><li q-text="text" q-attr="data-value: v" data-value="2007">2007</li><li q-text="text" q-attr="data-value: v" data-value="2006">2006</li><li q-text="text" q-attr="data-value: v" data-value="2005">2005</li><li q-text="text" q-attr="data-value: v" data-value="2004">2004</li><li q-text="text" q-attr="data-value: v" data-value="2003">2003</li><li q-text="text" q-attr="data-value: v" data-value="2002">2002</li><li q-text="text" q-attr="data-value: v" data-value="2001">2001</li><li q-text="text" q-attr="data-value: v" data-value="2000">2000</li><!--q-repeat--></ul></div></dd></dl></div><div class="filter-row"><dl class="sort-menu sort-menu2 clearfix"><dt class="title" q-text="title">出题方</dt><!--q-if--><!--q-if--><dd class="content yr_select f-select" q-attr="data-name:data_name" data-name="s_agency" tabindex="2"><div class="f-value-wrap"><div class="f-value">全部</div><span class="f-select-icon"><i class="icon-arrow-down"></i></span></div><div class="f-select-dropdown f-select--scroll"><ul class="f-value-list"><li q-text="text" q-attr="data-value: v" data-value="">全部</li><li q-text="text" q-attr="data-value: v" data-value="魁冠公考">魁冠公考</li><li q-text="text" q-attr="data-value: v" data-value="启盈晴教育">启盈晴教育</li><li q-text="text" q-attr="data-value: v" data-value="腾讯课堂">腾讯课堂</li><li q-text="text" q-attr="data-value: v" data-value="志公网校">志公网校</li><li q-text="text" q-attr="data-value: v" data-value="高顿网校">高顿网校</li><li q-text="text" q-attr="data-value: v" data-value="我赢职场">我赢职场</li><li q-text="text" q-attr="data-value: v" data-value="华图网校">华图网校</li><li q-text="text" q-attr="data-value: v" data-value="尚仕教育">尚仕教育</li><li q-text="text" q-attr="data-value: v" data-value="尚政公考">尚政公考</li><li q-text="text" q-attr="data-value: v" data-value="中公教育">中公教育</li><!--q-repeat--></ul></div></dd></dl></div><div class="filter-row"><dl class="sort-menu sort-menu2 clearfix"><dt class="title" q-text="title">是否真题</dt><dd class="content"><div class="radio" q-class="radio-check:selected" q-on="click:selectRadio(this, e)"><i></i><label><span q-text="text">是</span></label></div><div class="radio" q-class="radio-check:selected" q-on="click:selectRadio(this, e)"><i></i><label><span q-text="text">否</span></label></div><!--q-repeat--></dd><!--q-if--><!--q-if--></dl></div><div class="filter-row"><dl class="sort-menu sort-menu2 clearfix"><dt class="title" q-text="title">是否有解析</dt><dd class="content"><div class="radio" q-class="radio-check:selected" q-on="click:selectRadio(this, e)"><i></i><label><span q-text="text">是</span></label></div><div class="radio" q-class="radio-check:selected" q-on="click:selectRadio(this, e)"><i></i><label><span q-text="text">否</span></label></div><!--q-repeat--></dd><!--q-if--><!--q-if--></dl></div><!--q-repeat--></div><div class="toggle-cover"><a class="nor-link toggle" q-text="toggle|getText" q-on="click:toggleWrapperHeight(e)">更多查询条件</a></div></div></div> <div class="grid-question-list js-grid-global-question"> <div class="ya_main" id="js-global-question" q-with="globalQuestionList"> <div class="chose-all-btn ya_chose-all"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosenall, disabled:chosenallDisabled" q-on="click:toChoseAll(e)"> <i class="icon-checkbox question-checkbox"></i> 全选 </label> </div> <ul> <li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3286093</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3286093" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3286093">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295211</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295211" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="<br># 设置登录表单样式<br><br>## 表单样式基础<br><br>在所有的元素中，如果说表单元素样式的复杂性排第二，那么没有其他元素敢称第一。<br><br>### 基础表现一致<br><br>首先我们看下[normalize.css](https://necolas.github.io/normalize.css/6.0.0/normalize.css)对表单元素样式表现一致性的一个纠正情况，你就知道它是如何复杂的了。代码如下：<br><br>```css<br>/* Forms<br>   ========================================================================== */<br><br>/**<br> * Remove the margin in Firefox and Safari.<br> */<br><br>button,<br>input,<br>optgroup,<br>select,<br>textarea {<br>  margin: 0;<br>}<br><br>/**<br> * Show the overflow in IE.<br> * 1. Show the overflow in Edge.<br> */<br><br>button,<br>input { /* 1 */<br>  overflow: visible;<br>}<br><br>/**<br> * Remove the inheritance of text transform in Edge, Firefox, and IE.<br> * 1. Remove the inheritance of text transform in Firefox.<br> */<br><br>button,<br>select { /* 1 */<br>  text-transform: none;<br>}<br><br>/**<br> * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`<br> *    controls in Android 4.<br> * 2. Correct the inability to style clickable types in iOS and Safari.<br> */<br><br>button,<br>html [type=&quot;button&quot;], /* 1 */<br>[type=&quot;reset&quot;],<br>[type=&quot;submit&quot;] {<br>  -webkit-appearance: button; /* 2 */<br>}<br><br>/**<br> * Remove the inner border and padding in Firefox.<br> */<br><br>button::-moz-focus-inner,<br>[type=&quot;button&quot;]::-moz-focus-inner,<br>[type=&quot;reset&quot;]::-moz-focus-inner,<br>[type=&quot;submit&quot;]::-moz-focus-inner {<br>  border-style: none;<br>  padding: 0;<br>}<br><br>/**<br> * Restore the focus styles unset by the previous rule.<br> */<br><br>button:-moz-focusring,<br>[type=&quot;button&quot;]:-moz-focusring,<br>[type=&quot;reset&quot;]:-moz-focusring,<br>[type=&quot;submit&quot;]:-moz-focusring {<br>  outline: 1px dotted ButtonText;<br>}<br><br>/**<br> * 1. Correct the text wrapping in Edge and IE.<br> * 2. Correct the color inheritance from `fieldset` elements in IE.<br> * 3. Remove the padding so developers are not caught out when they zero out<br> *    `fieldset` elements in all browsers.<br> */<br><br>legend {<br>  box-sizing: border-box; /* 1 */<br>  color: inherit; /* 2 */<br>  display: table; /* 1 */<br>  max-width: 100%; /* 1 */<br>  padding: 0; /* 3 */<br>  white-space: normal; /* 1 */<br>}<br><br>/**<br> * 1. Add the correct display in IE 9-.<br> * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.<br> */<br><br>progress {<br>  display: inline-block; /* 1 */<br>  vertical-align: baseline; /* 2 */<br>}<br><br>/**<br> * Remove the default vertical scrollbar in IE.<br> */<br><br>textarea {<br>  overflow: auto;<br>}<br><br>/**<br> * 1. Add the correct box sizing in IE 10-.<br> * 2. Remove the padding in IE 10-.<br> */<br><br>[type=&quot;checkbox&quot;],<br>[type=&quot;radio&quot;] {<br>  box-sizing: border-box; /* 1 */<br>  padding: 0; /* 2 */<br>}<br><br>/**<br> * Correct the cursor style of increment and decrement buttons in Chrome.<br> */<br><br>[type=&quot;number&quot;]::-webkit-inner-spin-button,<br>[type=&quot;number&quot;]::-webkit-outer-spin-button {<br>  height: auto;<br>}<br><br>/**<br> * 1. Correct the odd appearance in Chrome and Safari.<br> * 2. Correct the outline style in Safari.<br> */<br><br>[type=&quot;search&quot;] {<br>  -webkit-appearance: textfield; /* 1 */<br>  outline-offset: -2px; /* 2 */<br>}<br><br>/**<br> * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.<br> */<br><br>[type=&quot;search&quot;]::-webkit-search-cancel-button,<br>[type=&quot;search&quot;]::-webkit-search-decoration {<br>  -webkit-appearance: none;<br>}<br><br>/**<br> * 1. Correct the inability to style clickable types in iOS and Safari.<br> * 2. Change font properties to `inherit` in Safari.<br> */<br><br>::-webkit-file-upload-button {<br>  -webkit-appearance: button; /* 1 */<br>  font: inherit; /* 2 */<br>}<br>```<br><br>### 盒模型计算方式<br><br>不同的表单元素盒模型的计算方式不太一样，多数是默认的“content-box”，但是还有些是“border-box”，如 chrome 浏览器对按钮就设置 `border-box`。所以为了以后的计算方便，还是统一设置为`border-box`方便。<br><br>```css<br>* {<br>    box-sizing: border-box;<br>}<br>```<br><br>### focus 样式<br><br>webkit 内核浏览器会自动添加 focus 样式, 效果如下：<br><br>![](http://coding.imweb.io/img/p2/form-focus.png)<br><br>而这一般在项目中都是要去掉的，代码如下：<br><br>```css<br>input,<br>select,<br>textarea,<br>button {<br>    outline: 0;<br>}<br>```<br><br>### 样式不可控<br><br>- 单选框（radio）及复选框（checkbox）的大小，颜色等都不可控，现在一般流行使用伪元素来设置该样式，覆盖默认的丑陋样式（如），或者使用 JS 来模拟单选框及复选框<br>- select 选项样式没法设置样式，所以如果不使用默认的又得用 JS 来搞<br>- 上传文件（file）各个浏览器表现不一致，而且几乎不可以美化（最多只能搞成一个按钮形式）<br>- placeholder IE9- 不支持，如果要兼容 IE9- 则需要 JS 来实现兼容<br>- 行高及高度未解之谜。有些元素某些浏览器设置行高无效，同样有些是高度无效，所以要实现一个高度且文字垂直居中最保险的办法是设置上下padding<br>- 更多 HTML 5 新加的各种表单元素的兼容问题<br><br>当然这还不是全部，所以对于表单，掌握基础的，了解些常用解决办法，能搞则搞，再不行就上 JS。<br><br>下面是一些设置样式的参考资料：<br><br>- [magic-check](https://github.com/forsigner/magic-check)<br>- [input上传按钮美化](http://www.haorooms.com/post/css_input_uploadmh)<br>- [submit提交按钮解决方案](http://www.w3cplus.com/solution/submitbtn/submitbtn.html)<br><br><br>## 题目<br><br>同样我们第一章也简单做了个登录表单。现在我们来为它设置一些样式，使其表现如下：<br><br>![链接效果](http://coding.imweb.io/img/p2/form-demo.png)<br><br>## 提示<br><br>- 增加外边距<br>- 去掉 focus 样式<br>- 鼠标滑过输入框，改变边框颜色（border-color）为“#188eee”<br>- 去掉提交按钮的默认边框，设置光标（cursor）为手型"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295211">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303622</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303622" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="j141840liwo"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303622">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//imweb.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=IMWeb前端学院&amp;ver2=//imweb.ke.qq.com" target="_blank">IMWeb前端学院</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303621</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303621" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="a1418bul44l"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303621">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//imweb.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=IMWeb前端学院&amp;ver2=//imweb.ke.qq.com" target="_blank">IMWeb前端学院</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303620</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303620" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="j1418yqkgh2"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303620">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295114</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295114" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 设置卡片样式<br><br>卡片在实际页面中应用范围也是非常的广，如[腾讯课堂](https://ke.qq.com)的课程列表卡片，[京东](https://www.jd.com/)的产品列表卡片：<br><br>![](http://coding.imweb.io/img/p2/card-ke.png)<br><br>![](http://coding.imweb.io/img/p2/card-jd.png)<br><br>这里我们准备了一个简单的卡片的 HTML 代码如下：<br><br>```html<br><a class=&quot;tour-item&quot; href=&quot;#&quot;><br>    <div class=&quot;tour-img-wrap&quot;><br>        <img class=&quot;tour-img&quot; src=&quot;http://coding.imweb.io/img/img-style.png&quot; alt=&quot;美化图片样式&quot;><br>    </div><br>    <h3 class=&quot;item-tt&quot; title=&quot;“华丽的冒险”之美国西部游&amp;mdash;&amp;mdash;day 4&quot;>“华丽的冒险”之美国西部游&amp;mdash;&amp;mdash;day 4</h3><br></a><br>```<br><br>同样已经设置好了部分样式，需要你来完成其余样式，使其最终效果如下（图一为正常效果，图二为鼠标滑过图片效果）：<br><br>![](http://coding.imweb.io/img/p2/card-demo.png)<br><br>![](http://coding.imweb.io/img/p2/card-hover-demo.png)<br><br>## 提示<br><br>- 卡片滑过的阴影（[box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow)）值为“0 0 5px rgba(0, 0, 0, .3)”<br>- 卡片图片父元素内容超过隐藏，上面圆角值为“5px”，底部外边距为5px<br>- 卡片标题文字行高为“30px”, 字体大小为“16px”，单行超过使用省略（[text-overflow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow)）<br><br>PS：卡片滑过的动画效果用到了 [transform](https://www.w3cplus.com/content/css3-transform) 及  [transition](https://www.w3cplus.com/content/css3-transition)，第三章我们也会详细介绍，你也可以先了解 "><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295114">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295112</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295112" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 设置简易导航<br><br>导航在每个站点都是必不可少的内容。有简单的也有复杂的，如下（一个[腾讯课堂](https://ke.qq.com/)，一个[github](https://github.com/)）：<br><br>![](http://coding.imweb.io/img/p2/nav-ke.png)<br><br>![](http://coding.imweb.io/img/p2/nav-github.png)<br><br>我们准备好了一段简单的 HTML 代码如下：<br><br>```html<br><nav class=&quot;link-list&quot;><br>    <a class=&quot;link-item&quot; href=&quot;#&quot;>首页</a><br>    <a class=&quot;link-item&quot; href=&quot;#&quot;>技术</a><br>    <a class=&quot;link-item&quot; href=&quot;#&quot;>杂谈</a><br>    <a class=&quot;link-item&quot; href=&quot;#&quot;>关于</a><br></nav><br>```<br><br>同样我们也提供了部分样式，需要你来完成其他样式，使其最终表现效果如下：<br><br>![](http://coding.imweb.io/img/p2/nav-demo.png)<br><br>## 提示<br><br>- 导航背景色为“#333”，圆角大小为“10px”<br>- 导航链接滑过背景色“#188eee”，左右内边距为“20px”，文字颜色为白色，无下划线，行高为“40px”<br><br>PS：关于`display: inline-block`我们第三章布局会有介绍，你也可以提前了解：[详解CSS display:inline-block的应用](http://web.jobbole.com/84089/)<br><br>"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295112">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">材料题</span>]</span> <span>[<span q-text="question|getqid">3303616</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="该题型暂不支持修改"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question question-material js-exam-question agency clearfix" data-qid="3303616" data-qtype="6"><div class="question-material-inner"><div class="question-title"> <span class="index"></span> <span class="que-label">【材料题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入） </div> <div class="material"></div><div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div><div class="question-material-wrap"><div class="exam-question fill-in-blank js-exam-question agency" data-qid="3303618" data-qtype="4"><div class="question-title"><span class="index">.1.</span><span class="que-label">【填空题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div><div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="right-msg"><i></i>答对了</div><div class="wrong-msg"><i></i><span class="js-wrong-msg">答错了</span></div><div class="answer-line"> <span class="answer"> <span>答案: 280px</span> <span class="js-correct-rate">&nbsp;&nbsp;正确率：0%</span> </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303618">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div><div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295066</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295066" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295066">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295027</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295027" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295027">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">材料题</span>]</span> <span>[<span q-text="question|getqid">3303614</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="该题型暂不支持修改"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question question-material js-exam-question agency clearfix" data-qid="3303614" data-qtype="6"><div class="question-material-inner"><div class="question-title"> <span class="index"></span> <span class="que-label">【材料题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入） </div> <div class="material"></div><div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//imweb.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=IMWeb前端学院&amp;ver2=//imweb.ke.qq.com" target="_blank">IMWeb前端学院</a>  </div></div></div><div class="question-material-wrap"><div class="exam-question fill-in-blank js-exam-question agency" data-qid="3303615" data-qtype="4"><div class="question-title"><span class="index">.1.</span><span class="que-label">【填空题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div><div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="right-msg"><i></i>答对了</div><div class="wrong-msg"><i></i><span class="js-wrong-msg">答错了</span></div><div class="answer-line"> <span class="answer"> <span>答案: -300px</span> <span class="js-correct-rate">&nbsp;&nbsp;正确率：0%</span> </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303615">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div><div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//imweb.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=IMWeb前端学院&amp;ver2=//imweb.ke.qq.com" target="_blank">IMWeb前端学院</a>  </div></div></div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303602</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303602" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="n14188uzsxf"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303602">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//imweb.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=IMWeb前端学院&amp;ver2=//imweb.ke.qq.com" target="_blank">IMWeb前端学院</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303601</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303601" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="n14188nm8aa"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303601">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//imweb.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=IMWeb前端学院&amp;ver2=//imweb.ke.qq.com" target="_blank">IMWeb前端学院</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295113</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295113" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 设置列表样式<br><br>## 列表样式基础<br><br>列表在网页中使用相当广泛，几乎遍地都是。但是矛盾的是，我们几乎从来不用其默认样式。所以为了方便干掉列表的默认样式就成了势在必行，其重置如下：<br><br>```css<br>// ul ol dl<br>ul, ol, li, dl, dd {<br>    margin: 0;<br>    padding: 0;<br>}<br><br>ul, ol {<br>    list-style: none outside none; /* type, position, image*/<br>}<br>```<br><br>其中`list-style`由`list-style-type`、`list-style-position`、<br>`list-style-image`三个属性组成。虽然`list-style-image`可以用来定义列表的前面的小图标，然而实战中需要设置列表前面的小图标时，我们一般都使用 background 来实现，所以这个属性几乎是个鸡肋。<br><br>## 题目<br><br>这里我们准备了一个 todo list 列表，前面有些小图标来标识各种状态：未完成，鼠标滑过，已完成。HTML 结构如下：<br><br>```html<br><ul class=&quot;todo-list&quot;><br>	<li class=&quot;todo-item item--done&quot;><i class=&quot;icon-todo&quot;></i><span class=&quot;item-tt&quot;>解决遗留bug</span></li><br>	<li class=&quot;todo-item&quot;><i class=&quot;icon-todo&quot;></i><span class=&quot;item-tt&quot;>准备分享资料</span></li><br>	<li class=&quot;todo-item item--done&quot;><i class=&quot;icon-todo&quot;></i><span class=&quot;item-tt&quot;>xxx项目需求宣讲会</span></li><br>	<li class=&quot;todo-item item--done&quot;><i class=&quot;icon-todo&quot;></i><span class=&quot;item-tt&quot;>团队组会</span></li><br>	<li class=&quot;todo-item&quot;><i class=&quot;icon-todo&quot;></i><span class=&quot;item-tt&quot;>xxx组件开发</span></li><br>	<li class=&quot;todo-item&quot;><i class=&quot;icon-todo&quot;></i><span class=&quot;item-tt&quot;>xxx邮件</span></li><br></ul><br>```<br>同样我们也设置了部分样式，其余的需要你来完成，最终效果如下：<br><br>![](http://coding.imweb.io/img/p2/list-demo.png)<br><br>## 提示<br><br>* 小图标的宽高皆为“18px”，右外边距为“10px” ，图标地址为“ http://coding.imweb.io/img/p2/icon-todo.png ”<br>* 已完成的文本装饰值为“line-through”（删除线效果）<br>"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295113">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295209</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295209" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 设置名片样式<br><br>名片大家都熟悉了，现在我们就要自己动手来设计个名片效果。首先准备了一个简单名片的 HTML 结构，代码如下：<br><br>```html<br><div class=&quot;business-card&quot;><br>	<i class=&quot;card-logo&quot;></i><br>	<div class=&quot;card-bd&quot;><br>		<ul class=&quot;info-list&quot;><br>			<li class=&quot;info-item&quot;><br>				<i class=&quot;iconfont icon-user&quot;></i><br>				<span>Henry</span><br>			</li><br>			<li class=&quot;info-item&quot;><br>				<i class=&quot;iconfont icon-phone&quot;></i><br>				<span>0755-86013388</span><br>			</li><br>			<li class=&quot;info-item&quot;><br>				<i class=&quot;iconfont icon-email&quot;></i><br>				<span><a class=&quot;item-link&quot; href=&quot;mailto:henry@imweb.io&quot;>henry@imweb.io</a></span><br>			</li><br>			<li class=&quot;info-item&quot;><br>				<i class=&quot;iconfont icon-link&quot;></i><br>				<span><a class=&quot;item-link&quot; href=&quot;http://imweb.io&quot;>http://imweb.io</a></span><br>			</li><br>			<li class=&quot;info-item&quot;><br>				<i class=&quot;iconfont icon-map&quot;></i><br>				<span>深圳市南山区深南大道10000</span><br>			</li><br>		</ul><br>	</div><br></div><br>```<br><br>同样已经设置好了部分样式，需要你来完成其余样式，使其最终效果如下：<br><br>![](http://coding.imweb.io/img/p2/business-card-demo.png)<br><br>名片右半部分的小图标采用了[icomoon](https://icomoon.io/)下载的字体图标，样式如下，请拷贝贴进样式表中：<br><br>```css<br>/* iconfont 样式 */<br>@font-face {<br>    font-family: 'webfont';<br>    src: url('http://coding.imweb.io/demo/p2/fonts/webfont.eot?ljbe2w');<br>    src: url('http://coding.imweb.io/demo/p2/fonts/webfont.eot?ljbe2w#iefix') format('embedded-opentype'), url('http://coding.imweb.io/demo/p2/fonts/webfont.ttf?ljbe2w') format('truetype'), url('http://coding.imweb.io/demo/p2/fonts/webfont.woff?ljbe2w') format('woff'), url('http://coding.imweb.io/demo/p2/fonts/webfont.svg?ljbe2w#webfont') format('svg');<br>    font-weight: normal;<br>    font-style: normal;<br>}<br><br>.iconfont {<br>    font-family: 'webfont' !important;<br>    speak: none;<br>    font-style: normal;<br>    font-weight: normal;<br>    font-variant: normal;<br>    text-transform: none;<br>    line-height: 1;<br>    -webkit-font-smoothing: antialiased;<br>    -moz-osx-font-smoothing: grayscale;<br>}<br><br>.icon-search:before {<br>    content: &quot;\f002&quot;;<br>}<br><br>.icon-email:before {<br>    content: &quot;\f003&quot;;<br>}<br><br>.icon-user:before {<br>    content: &quot;\f007&quot;;<br>}<br><br>.icon-map:before {<br>    content: &quot;\f041&quot;;<br>}<br><br>.icon-phone:before {<br>    content: &quot;\f095&quot;;<br>}<br><br>.icon-link:before {<br>    content: &quot;\f0c1&quot;;<br>}<br>```<br><br>## 提示<br><br>- 需要拷贝文档中的iconfont样式到代码里，来使用iconfont的样式<br>- 左右两边的橙色条采用了伪元素来生成，并且高度为33.3%，宽度为5px，背景色为#fc6b3f<br>- 左边的 logo 采用了背景图片，图片地址为“ http://coding.imweb.io/img/imweb-logo.png ”，且背景图片不重复。并且由于默认图片大于容器的大小，所以需要设置background-size 为cover<br>- 同时列表的除了第一个之外的所有item上外边距为10px<br>- 补充完善.info-list .iconfont规则的样式，设置文字水平居中，并且圆角为50%<br><br>"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295209">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295210</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295210" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 设置表格样式<br><br>## 表格样式基础<br><br>在没有 CSS 年代，表格的正确使用方法是通过直接在 table 元素上设置属性来实现效果的：<br><br>```html<br><table border=&quot;1&quot;><br>  <tr><br>    <th>Month</th><br>    <th>Savings</th><br>  </tr><br>  <tr><br>    <td>January</td><br>    <td>$100</td><br>  </tr><br></table><br>```<br><br>效果图如下：<br><br>![](http://coding.imweb.io/img/p2/table-initial.png)<br><br>当然有了 CSS 之后，样式肯定是交给 CSS 来负责了，这样我们现在把上面 table 的 border 属性去掉，通过 CSS 来设置 table 的 border，如下：<br><br>```css<br>table {<br>	border: 1px solid #ccc;<br>}<br>```<br><br>效果图如下：<br><br>![](http://coding.imweb.io/img/p2/table-border.png)<br><br>怎么只有外面一层有样式呢？跟上面设置属性的完全不同啊，这是因为我们只是使用 CSS 选中了 table 元素，而如果设置里面的线条应该是由 td、th、tr 元素来设置的。现在我们接着设置 th 和 td 的 边框试试：<br><br>```css<br>th, td {<br>	border: 1px solid #ccc;<br>}<br>```<br><br>效果图如下：<br><br>![](http://coding.imweb.io/img/p2/table-border-2.png)<br><br>这样的效果就跟我们在 table 元素上直接设置 border 属性差不多了，但是这明显也不是我们所要的效果，于是我们需要重置 table 如下（边框间隙为 0，边框合并）：<br><br>```css<br>table {<br>	border-spacing: 0; /* 边框间隙为0 */<br>    border-collapse: collapse; /* 边框合并 */<br>}<br>```<br><br>效果如下：<br><br>![](http://coding.imweb.io/img/p2/table-border-3.png)<br><br>除了把 table 重置之外，其实 th，td 还有一个默认的 padding 值，我们也需要重置为 0 ：<br><br>```css<br>td,<br>th {<br>    padding: 0;<br>}<br>```<br><br>除了这些基础的重置之外，表格布局算法也是一件比较纠结的事，其属性为 table-layout，取值有：<br><br>- auto：自动布局，列的宽度是由列单元格中没有折行的最宽的内容设定的<br>- fixed：固定布局，列的宽度取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关，与自动布局相比，浏览器可以更快得对表格进行布局<br><br>更多说明可参看：[CSS table-layout 属性](http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp)。<br><br>默认如果不设置table 及列的宽度，不论使用什么布局，table的宽度及列的宽度都由内容撑开。<br><br>而如果对 table 设置一个宽度，如“100%”，则列宽度存在以下几种情况：<br><br>- 没有任何列设置宽度，则列的宽度由其内容按比例分配<br>- 如果有某一列或几列设置了宽度，则剩余的由其内容按比例分配<br>- 如果每列都设置了宽度，每列的宽度加起来不等于table的宽度，则按照列设置的宽度比例重新分配宽度，而不是实际列设置的宽度<br><br>如果在设置 table 宽度的前提下，再设置其为固定布局，则列宽度存在以下几种情况：<br><br>- 没有任何列设置宽度，则宽度等分<br>- 如果有某一列或几列设置了宽度，则剩余的宽度等分<br>- 如果每列都设置了宽度，则按设置的比例分配宽度<br><br>## 题目<br><br>还记得我们第一章做的成绩单表格吧。现在我们来为它设置一些样式，使其表现如下：<br><br>![链接效果](http://coding.imweb.io/img/p2/table-demo.png)<br><br># 提示<br><br>- 重置 table 样式<br>- td，th的下边框为“1px solid #ccc”，左右内边距为“5px”，上下内边距为“10px”，且最后一行的td没有下边框<br>- tr 的偶数行背景色为“#f5f5f5”<br>- 每行第三个 td 的文字颜色为红色"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295210">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3286105</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3286105" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 创建表单<br><br>## 认识表单<br><br>可能对于表单这个概念你还感觉比较陌生，不过你以前肯定是接触过的，只是当时你不知道而已。<br><br>我们常见的登录，搜索，写博客，发表评论都是表单的一种，这么说就熟悉了吧。如下图这些：<br><br>![认识表单&amp;mdash;&amp;mdash;登录表单](http://coding.imweb.io/img/p1/form-1.png)<br><br>![认识表单&amp;mdash;&amp;mdash;搜索及发微博](http://coding.imweb.io/img/p1/form-2.png)<br><br>简单来说，表单可以让你输入文字，上传图片或视频等。<br><br>## 知识讲解<br><br>（特别注意：form表单所涉及到的知识特别多，先大概了解有这些东西，使用的时候再去查看相关文档即可，以后练习多了，自然就熟悉了。）<br><br>表单元素本身是指`<form>`，不过它也有一个更广泛的概念，指构成表单的所有元素。<br><br>首先就`<form>`元素本身来说，主要有两个属性（暂时不用细究，到后面我们还有详细说明）：<br><br>- action：表示表单提交成功跳转的地址（如果不知道跳转地址，可先用`#`表示）<br>- method：表示提交内容的方式，默认取值为 get，可以设置为 post<br><br>接下来将会简单介绍几种form表单常用元素。在介绍表单常用元素之前，先说下一般它们都通用的几个属性：<br><br>- name：表示字段名称<br>- value：表示字段值（最后提交的表单数据就是所有的字段值）<br>- disabled：表示字段是否禁用，该属性可以不用设置值，加上该属性即表示禁用<br>- readonly：表示字段是否只读，该属性可以不用设置值，加上该属性即表示只读<br><br>更多可参考：<br><br>- [form W3school](http://www.w3school.com.cn/tags/tag_form.asp)<br>- [form MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form)（页面下面有其相关元素参考）<br>- [表单属性浅析](http://blog.mingsixue.com/it/HTML-form-attribute.html)<br><br>下面正式介绍一些常用的表单元素，里面涉及到的所有的示例皆可[在线预览](http://coding.imweb.io/demo/p1/form.html)。<br><br>### `<input>`元素<br><br>`<input>`元素跟`<img>`元素一样，不需要闭合标签。除了上面说到的通用属性外，其常见属性如下：<br><br>- type：必备属性，常见取值如下：<br>  - text：文本输入框<br>  - password：密码输入框<br>  - search：搜索框<br>  - number：数字输入框<br>  - radio：单选按钮<br>  - checkbox：复选框<br>  - hidden：隐藏域（页面不可见，用来保存数据等）<br>  - file： 上传文件<br>  - button：普通按钮<br>  - submit：提交按钮<br>  - reset：重置按钮<br>- placeholder：如为输入框时，可设置该属性，在输入框中灰色显示提示信息<br><br>简单示例如下：<br><br>```html<br><!-- 文本输入框 --><br><input type=&quot;text&quot; name=&quot;username&quot;><br><!-- 文本输入框提示信息 --><br><input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;用户名&quot;><br><!-- 搜索框 --><br><input type=&quot;search&quot; name=&quot;search&quot; placeholder=&quot;搜索&quot;><br><!-- 数字输入框 --><br><input type=&quot;number&quot; name=&quot;age&quot; placeholder=&quot;只能输入数字&quot;><br><!-- 密码输入框 --><br><input type=&quot;password&quot; name=&quot;pwd&quot; placeholder=&quot;密码&quot;><br><!-- 单选框 --><br><input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;man&quot;>男<br><!-- 复选框 --><br><input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;music&quot;>音乐<br><!-- 隐藏域 --><br><input type=&quot;hidden&quot; name=&quot;other-data&quot; value=&quot;用户不可见数据&quot;><br><!-- 上传文件 --><br><input type=&quot;file&quot; name=&quot;file&quot;><br><!-- 普通按钮 --><br><input type=&quot;button&quot; name=&quot;button&quot; value=&quot;普通按钮&quot;><br><!-- 提交按钮 --><br><input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;立即加入&quot;><br><!-- 重置按钮 --><br><input type=&quot;reset&quot; name=&quot;reset&quot;><br>```<br><br>这样再对应下，我们刚才的登录表单，是不是都有了：<br><br>![认识表单&amp;mdash;&amp;mdash;登录表单](http://coding.imweb.io/img/p1/form-1-1.png)<br><br>更多 input 请参考：<br><br>- [input W3school](http://www.w3school.com.cn/html/html_form_attributes.asp)<br>- [input MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input)<br><br><br>### `<textarea>`元素<br><br>用于多行文本输入，如上面的新浪微博截图中的发表微博就是个多行文本输入框，我们常用的评论输入框也是这个。<br><br>可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过等我们学了 CSS 之后，更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸。<br><br>简单示例如下：<br><br>```html<br><textarea rows=&quot;5&quot; cols=&quot;30&quot; placeholder=&quot;请输入评论&quot;></textarea><br>```<br><br>更多 textarea 请参考：<br><br>- [textarea W3school](http://www.w3school.com.cn/tags/tag_textarea.asp)<br>- [textarea MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea)<br><br>###  `<select>`元素<br><br>用于创建选项菜单，默认只能选择一个值，可通过设置属性`multiple=&quot;multiple&quot;`来实现多选（很少很少使用多选）。<br><br>其选项为`<option>`元素，常用有两个属性：<br><br>- value：表示选中该选项的值。<br>- selected： 表示默认选中。<br><br>简单示例如下：<br><br>```html<br><!-- 单选且有默认选中值 --><br><select name=&quot;tag&quot;><br>  <option value=&quot;html&quot; selected>HTML</option><br>  <option value=&quot;css&quot;>CSS</option><br>  <option value=&quot;js&quot;>JS</option><br></select><br><!-- 多选 --><br><select name=&quot;tags&quot; multiple=&quot;multiple&quot;><br>  <option value=&quot;html&quot;>HTML</option><br>  <option value=&quot;css&quot;>CSS</option><br>  <option value=&quot;js&quot;>JS</option><br></select><br>```<br><br>更多 select 请参考：<br><br>- [select W3school](http://www.w3school.com.cn/tags/tag_select.asp)<br>- [select MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select)<br><br>### `<button>`元素<br><br>`<button>`元素用来定义按钮，跟 input 定义的按钮不同，这个是有闭合标签的。简单示例如下：<br><br>```html<br><button>我是个普通按钮</button><br>```<br><br>同样也可以通过设置 type 属性来实现提交按钮和重置按钮，不过不建议这么做。<br><br>```html<br><!-- 下面的两种方式不建议使用 --><br><button type=&quot;submit&quot;>提交按钮</button><br><button type=&quot;reset&quot;>重置按钮</button><br>```<br><br>一般对于提交与重置按钮，我们建议使用 input 来定义，对于普通按钮可以使用 button。<br><br>更多 button 请参考：<br><br>- [button W3school](http://www.w3school.com.cn/tags/tag_button.asp)<br>- [button MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button)<br><br>### `<label>`元素<br><br>`<label>`元素用于关联表单元素的标题，可直接包裹表单元素，也可以通过设置其 for 属性关联到表单元素的 id 属性，这样点击 label 标题上关联的表单元素就可以自动获取焦点，提升用户体验。<br><br>简单示例如下：<br><br>```html<br><!-- 包裹表单元素 --><br><label>用户名：<input type=&quot;text&quot;></label><br><br><!-- 使用for属性关联表单元素的id属性 --><br><label for=&quot;username&quot;>用户名：</label><input type=&quot;text&quot; id=&quot;username&quot;><br>```<br><br>更多 label 请参考：<br><br>- [label W3school](http://www.w3school.com.cn/tags/tag_label.asp)<br>- [label MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label)<br><br>###  更多参考<br><br>更多关于表单元素知识请参考：[HTML5中的表单元素](http://www.jianshu.com/p/1be42a9dda69)。<br><br>## 题目<br><br>创建一个登录表单，包括用户名、密码、下次自动登录、登录按钮（为了练习不同的元素，这个按钮我们采用 button 元素。但实际情况下，一般采用 input 元素，设置其 type 属性为 submit），用户名和密码需要使用 placeholder 属性提示，效果图如下：<br><br>![](http://coding.imweb.io/img/p1/form-demo.png)<br>"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3286105">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3286101</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3286101" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 创建链接<br><br>## 认识链接<br><br>使用过百度搜索都知道，我们搜索一个东西，然后百度会显示好多条，我们点击每条都会打开一个对应的网页。<br><br>以搜索“腾讯课堂”为例，出现如下结果：<br><br>![认识链接](http://coding.imweb.io/img/p1/link.png)<br><br>上图截图中的所有红框部分都是链接，点击就会跳到腾讯课堂相关页面。<br><br>这种从一个页面转到另一个页面就是Web的魅力所在，而这之间的跳转正是通过`<a>`元素链接来完成的。<br><br>现在就让我们也来创建一个链接，让其跳转到”腾讯课堂”，代码如下：<br><br>```html<br><a href=“https://ke.qq.com”>腾讯课堂</a><br>```<br><br>页面显示效果：[腾讯课堂](https://ke.qq.com)（点击将跳转到腾讯课堂首页）。<br><br>## 知识讲解<br><br> HTML 中的 `<a>`元素 (或HTML锚元素, Anchor Element) 用于定义一个超链接到其他网络页面或文件，页面内的某个位置，电子邮件地址或其他任何URL。<br><br>### 页面跳转<br><br>当其用于页面之间的跳转时主要有三个常用属性，分别为：<br><br>* title：指链接标题，一般与内容文字一样。鼠标滑过时暂停一会，会有个title提示效果，效果如下：<br>![title提示效果](http://coding.imweb.io/img/p1/link-2.png)<br>* href：指定链接的目标地址（如果暂时不能确定目标地址可先用`#`表示）<br>* target：定义打开窗口方式，默认是当前窗口打开，有四种取值，分别为：<br>	- _self：当前窗口打开，此值为默认值<br>	- _blank：新窗口打开（该值是使用最多的）<br>	- _parent：表示在当前框架的父框架打开（一般用于iframe中，先不用了解，以后再说）<br>	- _top：表示顶层框架打开（一般用于iframe中，先不用了解，以后再说）<br><br>### 页面内跳转<br><br>我们先打开一个有页面内跳转的页面：<a href=&quot;https://bonsaiden.github.io/JavaScript-Garden/zh/&quot; target=&quot;_blank&quot;>JavaScript秘密花园</a>。<br><br>滚动鼠标到底部，发现其就是一篇文章。然后点击右边的导航试试，发现只要一点击，中间的内容就会定位到对应导航的内容部分，这其实就是页面内跳转。<br><br>仔细看下其地址栏的，你会发现只有后面的“#xxxx&quot;部分发生变化，如下图：<br><br>![](http://coding.imweb.io/img/p1/link-3.png)<br><br>当`<a>`元素用于页面内的锚点跳转时，应该先为该页面设置一些锚点，而定义锚点有两种办法：<br><br>* 通过`<a>`元素的name属性来定义，如：`<a name=&quot;anchor-name&quot;>name属性的值就是锚点的名称</a>`<br>* 通过其他元素的id属性来定义，如：`<div id=&quot;anchor-name&quot;>id属性值可以作为锚点的名称</div>`<br><br>设置好了锚点之外，就可以通过`<a>`元素链接到该锚点位置，其`href`取值为“# + 锚点名称”，示例如下:<br><br>```html<br><a href=&quot;#anchor1&quot;>锚点链接一</a><br><a href=&quot;#anchor2&quot;>锚点链接二</a><br><br><div><br>	<div>我这里有很多内容...</div><br>	<!-- 使用a的name属性定义锚点 --><br>	<a name=&quot;anchor1&quot;>点击锚点链接一，会跳到我这里</a><br>	<div>我这里有很多内容...</div><br>	<!-- 使用元素的id属性定义锚点 --><br>	<p id=&quot;anchor2&quot;>点击锚点链接二，会跳转到我这里</p><br></div><br>```<br><br>### 电子邮件<br><br>当其用于邮件链接时，`href`属性的值为“mailto: + 邮件地址”，示例如下：<br><br>```html<br><a href=&quot;mailto:xuyc_brother@foxmail.com”>发送邮件给我</a><br>```<br>### 更多参考<br><br>更多关于`<a>`元素知识可参看：[`<a>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a)。<br><br>## 题目<br><br>创建一个链接，点击新窗口打开 IMWeb 官网，链接地址为“ http://imweb.io/ ”。"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3286101">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3286102</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3286102" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 创建图片<br><br>## 认识图片<br><br>网页中随处可见各种图片，如打开 [腾讯课堂_专业的在线教育平台(ke.qq.com)](https://ke.qq.com/)，映入眼帘的就是各种图片，如下面红色框标识的几个：<br><br>![认识图片](http://coding.imweb.io/img/p1/img-1.png)<br><br>这些图片都可以通过`<img>`元素来创建。（网页中的图片除了用`<img>`元素创建外，还可以使用CSS的背景图的形式表现，这个以后再说）<br><br>现在就让我们来创建一个图片，代码如下：<br><br>```html<br><img src=“http://coding.imweb.io/img/p1/link.png” alt=“imweb 前端招聘了”><br>```<br><br>图片显示效果为：<br><br>![imweb 前端招聘了](http://coding.imweb.io/img/p1/img-2.png)<br><br>## 知识讲解<br><br>首先`<img>`元素没有闭合标签，这点一定要记得。<br><br>除此之外，`<img>`元素还有几个重要属性如下：<br><br>- src：必备属性，表示图片地址<br>- alt：必备属性，如果图片加载失败将会显示该内容<br>- width：可选属性，用于设置图片的宽度，如`width=&quot;400&quot;`<br>- height：可选属性，跟width类似，用于设置图片的高度，如`height=&quot;300&quot;`<br><br>然后在实际页面中，有些图片还是个链接，点击图片会跳转到其他页面，那究竟是怎么回事呢？<br><br>其实无非是把图片放在了`<a>`元素里面当做了内容，如下代码，即可产生一个图片链接：<br><br>```html<br><a href=“https://www.lagou.com/jobs/1715898.html” target=“_blank”><br>    <img src=“http://coding.imweb.io/img/p1/img-2.png” alt=“imweb 前端招聘了”><br></a><br>```<br><br>最后，更多关于`<img>`元素知识可参看：[`<img>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)。<br><br>## 题目<br><br>创建一个图片链接，要求如下：<br><br>- 图片地址为“ http://coding.imweb.io/img/img-style.png ”<br>- 加载失败的提示文字为“IMWeb学院”<br>- 宽度为“200px”<br>- 链接地址为“ http://imweb.io/ ”，新窗口打开链接"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3286102">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295075</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295075" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295075">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295070</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295070" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295070">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3295020</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3295020" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3295020">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-22</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//ke.qq.com" report-tdw="action=Click_Source&amp;ver1=来自互联网&amp;ver2=//ke.qq.com" target="_blank">来自互联网</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303579</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303579" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="#11"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303579">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-21</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//sidyzuo.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=腾讯课堂（内部）&amp;ver2=//sidyzuo.ke.qq.com" target="_blank">腾讯课堂（内部）</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303578</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303578" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="<br>#项目说明<br><br>经过P0章的学习，相信你已经对Next学位和即将学习的课程有一定的了解了。我们的教学团队和技术专家将会一如既往地带领你完成整个学位的学习。<br><br>在未来的学习中你也许会遇到很多的情况，没关系，这是新手都会遇到的问题，这里有一些文章推荐给你，看看他们是怎么解决的？<br><br><br>同时，我们也鼓励你多去逛专业的技术论坛和社区，并把它培养成一个良好的习惯，以下推荐一些我们工程师常逛的站点给你：<br><br>- [MDN](https://developer.mozilla.org/zh-CN/)<br>- [Smashing Magazine](https://www.smashingmagazine.com/)<br>- [CSS Tricks ](https://css-tricks.com/)<br>- [Sitepoint](http://www.sitepoint.com/)<br>- [Javascript weekly](http://javascriptweekly.com/)<br>- [CSS weekly](http://css-weekly.com/)<br>- [博客园](http://www.cnblogs.com/)<br>- [前端早读课](http://www.zaoduke.net/)<br><br>最后，我们也很希望能够听到来自你的声音。所以，在本节中希望你完成一个简单的项目，你可以在以下的题目中挑选两个来完成：<br><br>* 分享一下你想成为前端工程师的初衷是什么；<br>* 写下现在的你对前端工程师的看法；<br>* 写下你对未来职业的规划，包括你的阶段性目标、你最终希望达到的目标；<br>* 如果有一个机会提问我们的专家团，你会问什么。<br><br>你的项目将会由我们Imweb的技术专家团来评审，他们会从专业的角度，并结合自己的经验，来给你提出有价值的建议。如果你想成为像他们一样的专业工程师，静下来好好地思考自己的职业规划并写下来，有一天你会感激自己的"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303578">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-21</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//sidyzuo.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=腾讯课堂（内部）&amp;ver2=//sidyzuo.ke.qq.com" target="_blank">腾讯课堂（内部）</a>  </div></div></div></div> </div> </li><li class="ya_list-box"> <div class="ya_head ques-list-head" q-on="click:toChose(e, this)"> <label class="f-checkbox tablelist__chosen-btn" q-class="checked:chosen, disabled:disabled"> <i class="icon-checkbox question-checkbox"></i> </label> <span>[<span q-text="question|getqtype">作图题</span>]</span> <span>[<span q-text="question|getqid">3303577</span>]</span> <!--q-repeat--> <div class="ya_btn-ctn ques-list-btn"> <span class="ya_span ya_ctrl-btn" q-on="click:editQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" q-attr="title:question|canEdit" title="编辑"><i class="icon-font i-edit exercise-table-icon disable" q-setdisable="question"></i></a> </span> <span class="ya_span ya_ctrl-btn" q-on="click:deleteQuestion(e, this)"> <a class="nor-link" href="javascript:void(0);" title="删除"><i class="icon-font i-delete exercise-table-icon disable" q-setdisable="question"></i></a> </span> </div> </div> <div class="ya_body"> <div class="js-exercise-box"><div class="exam-question subject js-exam-question agency" data-qid="3303577" data-qtype="5"><div class="question-title"> <span class="index"></span> <span class="que-label">【作图题】</span>coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）  <div class="uploader-main"> <p class="uploader-fl"> <span></span> <span class="uploader-weak-span">（0.00KB）</span> </p> <a href="javascript:void(0)" class="btn-weak uploader-fr js-download-file" data-res="# 项目说明<br><br>经过P0章的学习，相信你已经对Next学位和即将学习的课程有一定的了解了。我们的教学团队和技术专家将会一如既往地带领你完成整个学位的学习。<br><br>在未来的学习中你也许会遇到很多的情况，没关系，这是新手都会遇到的问题，这里有一些文章推荐给你，看看他们是怎么解决的？<br><br><br>同时，我们也鼓励你多去逛专业的技术论坛和社区，并把它培养成一个良好的习惯，以下推荐一些我们工程师常逛的站点给你：<br><br>- [MDN](https://developer.mozilla.org/zh-CN/)<br>- [Smashing Magazine](https://www.smashingmagazine.com/)<br>- [CSS Tricks ](https://css-tricks.com/)<br>- [Sitepoint](http://www.sitepoint.com/)<br>- [Javascript weekly](http://javascriptweekly.com/)<br>- [CSS weekly](http://css-weekly.com/)<br>- [博客园](http://www.cnblogs.com/)<br>- [前端早读课](http://www.zaoduke.net/)<br><br>最后，我们也很希望能够听到来自你的声音。所以，在本节中希望你完成一个简单的项目，你可以在以下的题目中挑选两个来完成：<br><br>* 分享一下你想成为前端工程师的初衷是什么；<br>* 写下现在的你对前端工程师的看法；<br>* 写下你对未来职业的规划，包括你的阶段性目标、你最终希望达到的目标；<br>* 如果有一个机会提问我们的专家团，你会问什么。<br><br>你的项目将会由我们Imweb的技术专家团来评审，他们会从专业的角度，并结合自己的经验，来给你提出有价值的建议。如果你想成为像他们一样的专业工程师，静下来好好地思考自己的职业规划并写下来，有一天你会感激自己的"><i class="icon-font i-download"></i>下载</a> </div>  </div>  <div class="exam-answer-ctn js-exam-answer-ctn" style="display: block;"><div class="answer-line"> <span class="answer">   </span>  <span class="nor-link analysis-switch js-toggle-analysis" style="float:right;">答案解析<i class="icon-font i-v-top"></i></span> </div><div class="analysis-wrap"> <div class="analysis" data-qid="3303577">coding学院前端专用题（edu.oa.com/在线教育/任务管理/试卷录入）</div></div></div> <div class="question-ft"><a class="js-feedback feedback" href="javascript:void(0)">反馈</a>  <span class="update">更新日期：2017-05-21</span>   <div class="source">  题目来源：<a class="nor-link agency_name" href="//sidyzuo.ke.qq.com" report-tdw="action=Click_Source&amp;ver1=腾讯课堂（内部）&amp;ver2=//sidyzuo.ke.qq.com" target="_blank">腾讯课堂（内部）</a>  </div></div></div></div> </div> </li><!--q-repeat--> </ul></div> <div class="yv_main" id="global-loading" q-with="globalQuestionLoading"><div class="section-msg" q-show="state|isShow" style="display: none;"><div class="msg-inner"><i class="icon-font icon-msg-large i-info" q-class="icon"></i><div class="msg-text" q-text="msg">没有试卷, TODO：wording产品确定</div></div></div></div> <div class="yw_main page_ctrl" id="global-page-ctrl" q-with="globalQuestionPage"><a href="javascript:void(0)" q-on="click:prePage" class="page-prev-btn page-btn-dis" q-class="page-btn-dis:dataChange|checkPreBtn">&lt;</a><a href="javascript:void(0)" q-text="n" class="page-btn active" q-on="click:pageSelected(this)" q-class="active:isActive">1</a><a href="javascript:void(0)" q-text="n" class="page-btn" q-on="click:pageSelected(this)" q-class="active:isActive">2</a><!--q-repeat--><span class="apostrophe hide" q-class="hide:mid|checkMid">...</span><!--q-repeat--><span class="apostrophe" q-class="hide:last|checkLast">...</span><a href="javascript:void(0)" class="page-btn" q-text="n" q-on="click:pageSelected(this)" q-class="active:isActive">10</a><a href="javascript:void(0)" class="page-btn" q-text="n" q-on="click:pageSelected(this)" q-class="active:isActive">11</a><!--q-repeat--><a href="javascript:void(0)" q-on="click:nextPage" class="page-prev-btn" q-class="page-btn-dis:dataChange|checkNextBtn">&gt;</a><span class="count-ctr">每页<input q-value="count" onkeypress="return (event.charCode == 13) || (event.charCode >= 48 &amp;&amp; event.charCode <= 57)" q-on="blur:countChanged(this, e), keyup:countKeyup(this, e)" maxlength="2">条</span></div> <div class="clearfix"></div> </div> </div> </div> </div> </div> <div class="yc_ctn" id="js-choselist"><div class="yc_wrap" q-class="yc_notexpand:notExpand"><div class="yc_right-box"><div class="yc_dl-box yc_show-list" q-class="yc_show-list:notShowList"><!--q-repeat--></div><dl class="yc_body yc_page"><div class="yc_other yc_other-gray" q-on="click:showList(this, e)">已选择<span class="yc_other-black" q-howmany="chosenTable">0</span>道题目<i class="icon-v icon-font yc_icon i-v-top" q-class="i-v-top:notShowList, i-v-bottom:notShowList|!"></i></div><div class="yc_other yc_other-blue" q-on="click:nextBtnClk(this, e)">添加</div></dl></div></div></div> <div id="js-drag-wrap" class="drag-wrap" style="display:none"> <div class="yd_wrap" id="js-pageinfo"> <div class="yd_form-line f-item"> <div class="f-field"><label class="">试卷名称：</label> <div class="input-ctn"> <input autocomplete="off" id="js-yd_name-input" class="input-text f-text" data-pattern="not_null|limitByLength" data-msg="试卷名称不能为空" data-tips="1-20字" data-name="name" type="text" placeholder="请填写试卷名称" q-model="infoTitle" q-class="input-err:titleErr" data-max="20" q-on="keyup:checkTitle(this, e)"> <div class="f-msg"><i class="icon-msg"></i><p class="f-msg-text"> </p></div> </div> </div> </div> <div class="yd_form-line f-item f-static"> <div class="f-field"> <label for="">试卷类型：</label> <span q-text="infoType|getExamType">普通试卷</span> </div> </div> <div class="yd_form-line f-item"> <div class="f-field"> <label class="">建议完成时间：</label> <div class="input-ctn"> <input autocomplete="off" id="js-yd_time-input" class="f-text yd_time-input" data-name="time" width="100" data-min="1" data-tips="请填写建议完成时间" data-max="600" data-pattern="not_null|integer|limit_number" data-msg="建议完成时间不能为空|请输入正整数" type="text" placeholder="请填写建议完成时间" maxlength="3" q-model="infoTime" q-class="input-err:timeErr" q-on="keyup:checkTime(this, e)"> <div class="f-msg"><i class="icon-msg"></i><p class="f-msg-text"> </p></div> </div> <span> 分钟</span> </div> </div> <div class="yd_form-line f-item f-static" title="不能修改" q-jqshow="hasScore" style="display: none;"> <label class="f-checkbox js-module-checkbox disabled" q-class="checked:hasScore" data-value="0" data-name="checkbox1"> <i class="icon-checkbox"></i> <span class="f-label-text">试卷计分</span> </label> </div> <div class="yd_form-line f-item f-static" title="不能修改" q-jqshow="hasModule" style="display: none;"> <label class="f-checkbox js-module-checkbox disabled" q-class="checked:hasModule" data-value="0" data-name="checkbox2"> <i class="icon-checkbox"></i> <span class="f-label-text">试卷分模块</span> </label> </div></div> <div class="drag-tab-wrap js-drag-tab-wrap"></div> <div class="drag-ques--wrap js-drag-ques-wrap"></div> <div class="ye_wrap" id="js-nextbtn"><a class="btn-weak ye_btn ye_btn-preview" q-on="click:previewBtnClk">预览</a> <a class="btn-default ye_btn ye_btn-submit" q-on="click:nextBtnClk(this, e)">提交</a></div> </div> <div id="js-succ-wrap" style="display:none"> <div class="yf_wrap" id="js-succ"><div class="yf_line"><i class="icon-font icon-msg-large i-success yf_left"></i><span class="yf_wording"><span q-text="succType">新增</span>试卷成功！</span></div><div class="yf_line"><span class="yf_exam-name">试卷名称：<span q-text="succTitle"></span></span></div><div class="yf_line"><a class="btn-default yf_btn" q-on="click:toContinue(this,e)">继续创建试卷</a><a class="btn-default yf_btn" q-on="click:toViewExams(this,e)">查看机构试卷</a></div></div> </div> </div></div>
    <!--包含尾部进来--> 
    <footer class="footer">
    <i class="icon-font i-logo" title="腾讯课堂_专业的在线教育平台"></i>
    <p>Copyright © 2017 Tencent. All Rights Reserved.</p>
    <p>深圳市腾讯计算机系统有限公司 版权所有 | <a href="//ke.qq.com/proService.html" target="_blank" rel="nofollow">腾讯课堂服务协议</a> | <a href="//ke.qq.com/sitemap.html" target="_blank">站点地图</a> | <a href="//ke.qq.com/faq.html" target="_blank">帮助</a></p>
</footer>
    


<aside class="wrap-side-operation" id="js-side-operation"> <div class="mod-side-operation"> <div id="js-jump-container" class="js-jump-container"> <a href="javascript:void(0)" class="mod-side-operation__jump-to-top" id="js-jump-to-top"><i class="icon-font i-to-top"></i></a> <div id="js-jump-plan-container" class="js-jump-plan-container"> <a href="javascript:void(0)" class="js-jump-plane" id="js-plane"></a> </div> </div> <div class="side-service-item side-service-hover side-service-qq js-c-special"> <a class="item-link-block" href="http://wpa.b.qq.com/cgi/wpa.php?ln=2&amp;uin=800082734" target="_blank" report-tdw="action=BQQ_clk&amp;module=agencymanage"> <!-- <i class="icon-side-qq item-icon"></i> --> <i class="icon-font i-qq-border item-icon"></i> <span class="item-hover-text">在线客服</span> </a> </div> <div class="side-service-item side-service-hover side-service-weixin js-c-special"> <!-- <i class="icon-side-weixin item-icon"></i> --> <i class="icon-font i-weixin-border item-icon"></i> <span class="item-hover-text">扫码关注</span> <div class="item-hover-tips"></div> </div> <div id="js-qrcode-container" class="side-service-item side-service-qr-code" report-tdw="action=sweep"> <!-- <i class="icon-side-qr-code item-icon"></i> --> <a class="side-service-right" href="//ke.qq.com/download/app.html" target="_blank"> <i class="icon-font i-phone item-icon" id="js-qrcode-icon"></i> <span class="item-hover-text" id="js-qrcode-wording">App下载</span> <span class="hidden-clip">腾讯课堂【APP Android iPhone 下载】</span> </a> <a href="//ke.qq.com/download/app.html" class="item-hover-tips" id="js-qrcode-tips" target="_blank"> <i class="icon-font i-close" id="js-tips-close"></i> <i class="item-hover-bg"></i> <p class="item-hover-title">腾讯课堂APP</p> <p class="item-hover-title">随时随地轻松学</p><!-- <p class="item-hover-tips-wording"> App下载 </p> --> </a> </div> <!-- 免费批改作业 mod.revise.scss --> <div class="side-service-item side-service-qr-code side-service-qr-design-course" style="display: none;"> <a class="side-service-right"> <i class="icon-font i-weixin-border item-icon"></i> <span class="item-hover-text">官方微信</span> </a> <a class="item-hover-tips"> <i class="icon-font i-close" id="i_design_course_close"></i> <i class="item-hover-bg"></i> <p class="item-hover-title">扫码关注腾讯课堂设计学院，第一时间查看最新批改结果。</p> </a> </div> <div class="side-service-item side-service-hover side-service-feedback"> <a class="item-link-block js-feedback-link" href="http://support.qq.com/write.shtml?fid=1042" target="_blank" rel="nofollow" report-tdw="action=Feedback"> <!-- <i class="icon-side-feedback item-icon"></i> --> <i class="icon-font i-edit item-icon"></i> <span class="item-hover-text">问题反馈</span> </a> </div> </div></aside></body></html>